<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="./lib/vue.js"></script>
    <style>
      .red {
        color: #rgba(228,18,100,1);
      }

      .thin {
        font-weight: 200;
      }

      .italic {
        font-style: italic;
      }

      .active {
        letter-spacing: 0.5em;
      }

    </style>
  </head>
  <body>
    <div id="app">
      <!-- 原始方式 -->
      <!-- <h1 class="red thin">这是一个很大很大的h1</h1> -->

      <!-- 第一种方式: 传递一个数组 -->
      <!-- <h1 :class="['thin', 'italic']">这是一个很大很大的h1</h1> -->

      <!-- 第二种方式: 在数组中使用三元表达式 -->
      <!-- <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的h1</h1> -->

      <!-- 在数组中使用对象来代替三元表达式 -->
      <!-- <h1 :class="['thin', 'italic', {'active':flag}]">这是一个很大很大的h1</h1> -->

      <!-- 在为class 使用 v-bind 绑定对象的时候,对象的属性名是类名, 属性可带引号也可不带引号,属性的值是一个标识符  -->
      <!-- <h1 :class="{red:true, thin:true, italic:false, active:false}">这是一个很大很大的h1</h1> -->

      <h1 :class="classObj">这是一个很大很大的h1</h1>
    </div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          flag: true,
          classObj: {red:true, thin:true, italic:false, active:false}
        },
        methods: {

        }
      })
    </script>



  </body>
</html>
